<%-- 
    eCOM - Adopte un Presta - Mars-Avril 2013
    Document   : portfolio
    Created on : Mar 17, 2013, 8:24:40 PM
    Author     : KJWT
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="java.util.Iterator"%>
<%@page import="java.util.List"%>
<%@page import="entities.Product"%>
<%@page import="entities.Account"%>
<%@page import="servlets.ServletChargementDonnees"%>
<%@page import="servlets.tools.EtatProduct_Translator"%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<%
// Portfolio - A supprimer ( plus utilisé )
%>

<%
    Account acc = (Account) request.getSession().getAttribute("account");
    
    if (acc == null) 
    {
        System.err.println("portfolio.jsp -- acc == null");
    }
    else
    {
        System.err.println("portfolio.jsp -- acc n'est pas null");
        System.err.println("portfolio.jsp -- nom du compte : " + acc.getNom());
    }
%>


<html lang="fr">
    <head>
        <title>Adopte Un Presta : Portfolio</title>
        <meta charset="utf-8">
        <meta name="description" content="Site de vente de prestataires">
        <meta name="keywords" content="Prestataire, SSII, recrutement, RH, vente">
        <meta name="author" content="Kheira, Jef, William, Tuan">
        <link rel="stylesheet" href="css/style.css">
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/script.js"></script>
    </head>
    <body>

                <!-- PRO Framework Panel Begin -->
        <div id="advanced">
            <span class="trigger">
                <strong></strong>
                <em></em>
            </span>
            <div class="bg_pro">
                <div class="pro_main">
                    <a href="" class="pro_logo"></a>
                    <ul class="pro_menu">
                        <li>
                            <a href="index.jsp">
                                <img src="images/pro_home.png" alt="">
                            </a>
                        </li>

                        <c:if test="${isLoggedIn == 'true'}">
                            <li style="margin-left: 300px">
                                <a href="/AdopteUnPrestaWA/ServletChargementDonnees?action=displayCart">Mon Panier</a>
                            </li>
                            <li>
                                <a href="/AdopteUnPrestaWA/ServletChargementDonnees?action=afficherMonCompte">Mon Compte</a>
                            </li>
                            <li>
                                <a href="/AdopteUnPrestaWA/ServletChargementDonnees?action=logout">Déconnexion</a>
                            </li>
                        </c:if>
                        <c:if test="${isLoggedIn != 'true'}">
                            <li style="margin-left: 300px">
                                <a href="/AdopteUnPrestaWA/ServletChargementDonnees?action=displayCart">Mon Panier</a>
                            </li>
                            <li>
                                <a href="/AdopteUnPrestaWA/ServletChargementDonnees?action=gotoSubscribe">Inscription</a>
                            </li>
                            <li><a>Se connecter<span></span></a>  
                                <ul>
                                    <form action="/AdopteUnPrestaWA/ServletChargementDonnees?action=login" method="POST">
                                        <div>
                                            <label for="login">Identifiant : </label> <br/>
                                            <input name="login" type="text" size="10" maxlength="255" style="height:15px;font-size:14px;width: 130px"/> <br/><br/>                          
                                        </div>
                                        <div>
                                            <label for="password"> Mot de passe : </label> <br/>
                                            <input name="password" type="password" size="10" maxlength="255" style="height:15px;font-size:14px;width: 130px"/> <br/><br/>
                                        </div>
                                        <input class="btn sign-in" type="submit" value="Connexion" />
                                    </form>
                                </ul>
                            </li>
                        </c:if>
                    </ul>          
                </div>       
            </div>   
        </div>

        <!-- PRO Framework Panel End -->
        <div class="bg-main">
            <!--==============================header=================================-->

            <header>
                <div class="container_24">
                    <div class="wrapper">
                        <div class="grid_13">
                            <h1><a href="index.jsp">Idealex</a></h1>
                        </div>
                        <div class="grid_11">
                            <form action="/AdopteUnPrestaWA/ServletChargementDonnees?action=rechercher" method="POST">
                                <div align="right">
                                    <input style=" font:11px/15px Arial, Helvetica, sans-serif; " type="text" name="search_query">
                                    <input style=" background:#1f2025; font:11px/15px Arial, Helvetica, sans-serif; text-transform:uppercase; color:#eaeaea; padding:8px 8px 8px 8px;" type="submit" value="Rechercher">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <nav class="main-menu">
                    <ul class="sf-menu">
                        <li><a href="more.jsp"><em>A propos</em><strong></strong></a><ul>
                                <li><a href="more.jsp">Qui sommes-nous ?</a></li>
                                <li><a href="enConstruction.jsp">Nouvelles</a></li>
                                <li><a href="/AdopteUnPrestaWA/ServletChargementDonnees?action=product">Produits</a></li>
                            </ul>
                        </li>
                        <li><a href="/AdopteUnPrestaWA/ServletChargementDonnees?action=product"><em>Produits</em><strong></strong></a><ul>
                                <li><a href="/AdopteUnPrestaWA/ServletChargementDonnees?action=product">Tous</a></li>
                                <li><a href="/AdopteUnPrestaWA/ServletChargementDonnees?action=developer">Développeurs</a></li>
                                <li><a href="/AdopteUnPrestaWA/ServletChargementDonnees?action=projectManager">Chefs de projet</a></li>
                                <li><a href="/AdopteUnPrestaWA/ServletChargementDonnees?action=productManager">Responsables produits</a></li>
                                <li><a href="/AdopteUnPrestaWA/ServletChargementDonnees?action=architect">Architectes</a></li>
                                <li><a href="/AdopteUnPrestaWA/ServletChargementDonnees?action=coach">Coach / Scrum Master</a></li>
                                <li><a href="/AdopteUnPrestaWA/ServletChargementDonnees?action=consultant">Consultants</a></li>
                            </ul>
                        </li>	
                        <li><a href="/AdopteUnPrestaWA/ServletChargementDonnees?action=productStores"><em>Partenaires</em><strong></strong></a></li>
                        <li><a href="enConstruction.jsp"><em>Autres</em><strong></strong></a></li>
                        <li><a href="enConstruction.jsp"><em>Clients</em><strong></strong></a></li>
                        <c:set var="etatUtilisateur" scope="session" property="account.accessLevel" />

                        <c:if test="${account.accessLevel == 2}">
                            <!-- c:out value="Bienvenue super-admin" /> -->
                            <li><a href="super-admin.jsp"><em>Administration</em><strong></strong></a><ul>
                                    <li>Compte</li>
                                    <li><a href="ajoutAccount.jsp">Créer Compte</a></li>
                                    <li><a href="modifAccount.jsp">Modifier/Supprimer</a></li>
                                    <li>ProductStore</li>
                                    <li><a href="ajoutProductStore.jsp">Créer ProductStore</a></li>
                                    <li><a href="modifProductStore.jsp">Modifier/Supprimer</a></li>
                                     <li>Prestataires</li>
                                        <li><a href="ajoutPresta.jsp">Créer Presta</a></li>
                                        <li><a href="modifPresta.jsp">Modifier/Supprimer</a></li>     
                                   <li>Autres</li>	
                                </ul>
                            </li>
                        </c:if>
                        <c:if test="${account.accessLevel == 1}">
                            <!-- c:out value="Bienvenue admin" /> -->                                        
                            <li><a href="admin.jsp"><em>Options</em><strong></strong></a><ul>
                                    <li><a href="ajoutPresta.jsp">Créer Presta</a></li>
                                    <li>Autres</li>						
                                </ul>				
                            </li>	


                        </c:if>
                        <c:if test="${account.accessLevel == 0}">
                            <!-- c:out value="Bienvenue utilisateur" /> -->
                            <li></li>
                        </c:if>
                        <li class="last"><a href="contacts.jsp"><em>Contacts</em><strong></strong></a></li>
                    </ul>
                    <div class="clear"></div>
                </nav>
                
            </header>
            <!--==============================section=================================-->
            <section class="padsection7">
                <div class="container_24">
                    <div class="wrapper"><div class="grid_24"><h1 class="title3">Portfolio Page</h1></div></div>
                </div>
                <div class="tabs tabs4">
                    <div class="wrapper">
                        <ul class="layouts-menu">
                            <li class="portfolio3_capt"><a href="#"><span></span></a></li>
                            <li class="portfolio3"><a href="#"><span></span></a></li>
                            <li class="portfolio4_capt"><a href="#"><span></span></a></li>
                            <li class="portfolio4"><a href="#"><span></span></a></li>
                            <li class="portfolio2_capt"><a href="#"><span></span></a></li>
                            <li class="portfolio2"><a href="#"><span></span></a></li>
                            <li class="portfolio1"><a href="#" class="current"><span></span></a></li>
                        </ul>
                    </div>
                    <!-- Three with Caption Columns Begin -->
                    <div class="tab-content">
                        <div class="container_24">
                            <div class="wrapper">   
                                <div class="grid_8">            

                                    <c:forEach var="item" items="${requestScope['prestataires']}" >   
                                        <div class='wrapper pad_port'>
                                            <a href='images/stock_images/900x500_2.jpg' data-gal='prettyPhoto[gallery]' class='image_style3 image_with_capt lightbox-image'><img src='images/stock_images/280x200_2.jpg' alt=''></a>
                                                <c:out value="${item.nom}"/>         
                                                <c:out value="${item.prenom}"/>
                                            <br>
                                            <a href='more.jsp' class='btn'>En savoir plus ...</a>
                                        </div>
                                    </c:forEach>                  

                                    <!--
                                        <div class="wrapper pad_port">
                                                <a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/280x200_2.jpg" alt=""></a>
                                                <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
                                                <a href="more.jsp" class="btn">En savoir plus ...</a>
                                        </div>
                                        <div class="wrapper pad_port">
                                                <a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/280x200_3.jpg" alt=""></a>
                                                <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
                                                <a href="more.jsp" class="btn">En savoir plus ...</a>
                                        </div>
                                        <div class="wrapper pad_port">
                                                <a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/280x200_4.jpg" alt=""></a>
                                                <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
                                                <a href="more.jsp" class="btn">En savoir plus ...</a>
                                        </div>
                                    -->
                                </div>
                                <div class="grid_8">
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_5.jpg" data-gal="prettyPhoto[gallery]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/280x200_5.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_6.jpg" data-gal="prettyPhoto[gallery]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/280x200_6.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_7.jpg" data-gal="prettyPhoto[gallery]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/280x200_7.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                </div>
                                <div class="grid_8">
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_8.jpg" data-gal="prettyPhoto[gallery]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/280x200_8.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_1.jpg" data-gal="prettyPhoto[gallery]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/280x200_1.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/280x200_2.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                </div>
                            </div>
                            <div class="wrapper">
                                <div class="grid_24">
                                    <dl class="description-box description-box-pad3">
                                        <dt><a class="description-dark">Description<span></span></a></dt>
                                        <dd>
                                            <div class="inner">
                                            </div>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Three with Caption Columns End -->
                    <!-- Three Columns Begin -->
                    <div class="tab-content">
                        <div class="container_24">
                            <div class="wrapper small-image">
                                <div class="grid_8">
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery5]" class="image_style3 lightbox-image"><img src="images/stock_images/280x200_2.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_5.jpg" data-gal="prettyPhoto[gallery5]" class="image_style3 lightbox-image"><img src="images/stock_images/280x200_5.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_8.jpg" data-gal="prettyPhoto[gallery5]" class="image_style3 lightbox-image"><img src="images/stock_images/280x200_8.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery5]" class="image_style3 lightbox-image"><img src="images/stock_images/280x200_3.jpg" alt=""></a>
                                    </div>
                                </div>
                                <div class="grid_8">
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery5]" class="image_style3 lightbox-image"><img src="images/stock_images/280x200_3.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_6.jpg" data-gal="prettyPhoto[gallery5]" class="image_style3 lightbox-image"><img src="images/stock_images/280x200_6.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_1.jpg" data-gal="prettyPhoto[gallery5]" class="image_style3 lightbox-image"><img src="images/stock_images/280x200_1.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery5]" class="image_style3 lightbox-image"><img src="images/stock_images/280x200_4.jpg" alt=""></a>
                                    </div>
                                </div>
                                <div class="grid_8">
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery5]" class="image_style3 lightbox-image"><img src="images/stock_images/280x200_4.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_7.jpg" data-gal="prettyPhoto[gallery5]" class="image_style3 lightbox-image"><img src="images/stock_images/280x200_7.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery5]" class="image_style3 lightbox-image"><img src="images/stock_images/280x200_2.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_5.jpg" data-gal="prettyPhoto[gallery5]" class="image_style3 lightbox-image"><img src="images/stock_images/280x200_5.jpg" alt=""></a>
                                    </div>
                                </div>
                            </div>
                            <div class="wrapper">
                                <div class="grid_24">
                                    <dl class="description-box description-box-pad3">
                                        <dt><a class="description-dark">Description<span></span></a></dt>
                                        <dd>
                                            <div class="inner">
                                            </div>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Three Columns End -->
                    <!-- Four with Caption Columns Begin -->
                    <div class="tab-content">
                        <div class="container_24">
                            <div class="wrapper">
                                <div class="grid_6">
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery2]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_2.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery2]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_3.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery2]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_4.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_5.jpg" data-gal="prettyPhoto[gallery2]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_5.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                </div>
                                <div class="grid_6">
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_6.jpg" data-gal="prettyPhoto[gallery2]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_6.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_7.jpg" data-gal="prettyPhoto[gallery2]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_7.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_8.jpg" data-gal="prettyPhoto[gallery2]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_8.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery2]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_1.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                </div>
                                <div class="grid_6">
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_1.jpg" data-gal="prettyPhoto[gallery2]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_1.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery2]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_2.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery2]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_3.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery2]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_4.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                </div>
                                <div class="grid_6">
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_5.jpg" data-gal="prettyPhoto[gallery2]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_5.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_6.jpg" data-gal="prettyPhoto[gallery2]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_6.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_7.jpg" data-gal="prettyPhoto[gallery2]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_7.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_8.jpg" data-gal="prettyPhoto[gallery2]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_8.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                </div>
                            </div>
                            <div class="wrapper">
                                <div class="grid_24">
                                    <dl class="description-box description-box-pad3">
                                        <dt><a class="description-dark">Description<span></span></a></dt>
                                        <dd>
                                            <div class="inner">
                                            </div>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Four with Caption Columns End -->
                    <!-- Four Columns Begin -->
                    <div class="tab-content">
                        <div class="container_24">
                            <div class="wrapper">
                                <div class="grid_6">
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_1.jpg" data-gal="prettyPhoto[gallery6]" class="image_style3 lightbox-image"><img src="images/stock_images/200x150_1.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery6]" class="image_style3 lightbox-image"><img src="images/stock_images/200x150_2.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_8.jpg" data-gal="prettyPhoto[gallery6]" class="image_style3 lightbox-image"><img src="images/stock_images/200x150_8.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery6]" class="image_style3 lightbox-image"><img src="images/stock_images/200x150_4.jpg" alt=""></a>
                                    </div>
                                </div>
                                <div class="grid_6">
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery6]" class="image_style3 lightbox-image"><img src="images/stock_images/200x150_2.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery6]" class="image_style3 lightbox-image"><img src="images/stock_images/200x150_3.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_5.jpg" data-gal="prettyPhoto[gallery6]" class="image_style3 lightbox-image"><img src="images/stock_images/200x150_5.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery6]" class="image_style3 lightbox-image"><img src="images/stock_images/200x150_2.jpg" alt=""></a>
                                    </div>
                                </div>
                                <div class="grid_6">
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery6]" class="image_style3 lightbox-image"><img src="images/stock_images/200x150_3.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery6]" class="image_style3 lightbox-image"><img src="images/stock_images/200x150_4.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_7.jpg" data-gal="prettyPhoto[gallery6]" class="image_style3 lightbox-image"><img src="images/stock_images/200x150_7.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery6]" class="image_style3 lightbox-image"><img src="images/stock_images/200x150_3.jpg" alt=""></a>
                                    </div>
                                </div>
                                <div class="grid_6">
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_1.jpg" data-gal="prettyPhoto[gallery6]" class="image_style3 lightbox-image"><img src="images/stock_images/200x150_1.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_5.jpg" data-gal="prettyPhoto[gallery6]" class="image_style3 lightbox-image"><img src="images/stock_images/200x150_5.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery6]" class="image_style3 lightbox-image"><img src="images/stock_images/200x150_4.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_8.jpg" data-gal="prettyPhoto[gallery6]" class="image_style3 lightbox-image"><img src="images/stock_images/200x150_8.jpg" alt=""></a>
                                    </div>
                                </div>
                            </div>
                            <div class="wrapper">
                                <div class="grid_24">
                                    <dl class="description-box description-box-pad3">
                                        <dt><a class="description-dark">Description<span></span></a></dt>
                                        <dd>
                                            <div class="inner">
                                            </div>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Four Columns End -->
                    <!-- Two Columns with Caption Begin -->
                    <div class="tab-content">
                        <div class="container_24">
                            <div class="wrapper">
                                <div class="grid_12">
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_1.jpg" data-gal="prettyPhoto[gallery3]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/450x300_1.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery3]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/450x300_2.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery3]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/450x300_3.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                </div>
                                <div class="grid_12">
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery3]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/450x300_4.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_5.jpg" data-gal="prettyPhoto[gallery3]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/450x300_5.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_6.jpg" data-gal="prettyPhoto[gallery3]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/450x300_6.jpg" alt=""></a>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue.</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                </div>
                            </div>
                            <div class="wrapper">
                                <div class="grid_24">
                                    <dl class="description-box description-box-pad3">
                                        <dt><a class="description-dark">Description<span></span></a></dt>
                                        <dd>
                                            <div class="inner">
                                            </div>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Two Columns with Caption End -->
                    <!-- Two Columns Begin -->
                    <div class="tab-content">
                        <div class="container_24">
                            <div class="wrapper">
                                <div class="grid_12">
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_1.jpg" data-gal="prettyPhoto[gallery7]" class="image_style3 lightbox-image"><img src="images/stock_images/450x300_1.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery7]" class="image_style3 lightbox-image"><img src="images/stock_images/450x300_2.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery7]" class="image_style3 lightbox-image"><img src="images/stock_images/450x300_3.jpg" alt=""></a>
                                    </div>
                                </div>
                                <div class="grid_12">
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery7]" class="image_style3 lightbox-image"><img src="images/stock_images/450x300_4.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_5.jpg" data-gal="prettyPhoto[gallery7]" class="image_style3 lightbox-image"><img src="images/stock_images/450x300_5.jpg" alt=""></a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <a href="images/stock_images/900x500_6.jpg" data-gal="prettyPhoto[gallery7]" class="image_style3 lightbox-image"><img src="images/stock_images/450x300_6.jpg" alt=""></a>
                                    </div>
                                </div>
                            </div>
                            <div class="wrapper">
                                <div class="grid_24">
                                    <dl class="description-box description-box-pad3">
                                        <dt><a class="description-dark">Description<span></span></a></dt>
                                        <dd>
                                            <div class="inner">
                                            </div>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Two Columns End -->
                    <!-- Full-width Begin -->
                    <div class="tab-content">
                        <div class="container_24">
                            <div class="wrapper">
                                <div class="grid_24">
                                    <div class="wrapper pad_port">
                                        <div class="image_left"><a href="images/stock_images/900x500_1.jpg" data-gal="prettyPhoto[gallery8]" class="lightbox-image"><img src="images/stock_images/300x200_1.jpg" alt=""></a></div>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede.</p>
                                        <p>Mauris accumsan nulla vel diam. Sed lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac lorem. Vestibulum sed ante. Donec sagittis euismod purus voluptatem accusantium doloremque. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <div class="image_left"><a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery8]" class="lightbox-image image_style1"><img src="images/stock_images/300x200_2.jpg" alt=""></a></div>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede.</p>
                                        <p>Mauris accumsan nulla vel diam. Sed lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac lorem. Vestibulum sed ante. Donec sagittis euismod purus voluptatem accusantium doloremque. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
                                        <a href="more.jsp" class="btn">En savoir plus ...</a>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <div class="image_right"><a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery8]" class="lightbox-image image_style2"><img src="images/stock_images/300x200_3.jpg" alt=""></a></div>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede.</p>
                                        <p>Mauris accumsan nulla vel diam. Sed lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac lorem. Vestibulum sed ante. Donec sagittis euismod purus voluptatem accusantium doloremque. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
                                        <div class=" alignright"><a href="more.jsp" class="btn">En savoir plus ...</a></div>
                                    </div>
                                    <div class="wrapper pad_port">
                                        <div class="image_right"><a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery8]" class="lightbox-image image_style3"><img src="images/stock_images/300x200_4.jpg" alt=""></a></div>
                                        <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede.</p>
                                        <p>Mauris accumsan nulla vel diam. Sed lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac lorem. Vestibulum sed ante. Donec sagittis euismod purus voluptatem accusantium doloremque. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
                                        <div class=" alignright"><a href="more.jsp" class="btn">En savoir plus ...</a></div>
                                    </div>
                                </div>
                            </div>
                            <div class="wrapper">
                                <div class="grid_24">
                                    <dl class="description-box description-box-pad3">
                                        <dt><a class="description-dark">Description<span></span></a></dt>
                                        <dd>
                                            <div class="inner">
                                            </div>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Full-width End -->
                </div>
                <div class="container_24">
                    <div class="wrapper">
                        <div class="grid_24">
                            <h2 class="title">Filter Images</h2>
                            <ul class="splitter">
                                <li>
                                    <ul class="fleft">
                                        <li class="segment-1 selected-1"><a data-value="all" class="btn">Everything</a></li>
                                        <li class="segment-0"><a data-value="blond" class="btn">Services</a></li>
                                        <li class="segment-2 last"><a data-value="brun" class="btn">Products</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <ul id="boxes-filter" class="image-grid">
                        <li data-id="id-1" class="blond">
                            <a href="images/stock_images/900x500_1.jpg" data-gal="prettyPhoto[gallery4]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_1.jpg" alt=""></a>
                            <p>Vestibulum libero nisl neque.</p>
                            <a href="more.jsp" class="btn">En savoir plus ...</a>
                        </li>
                        <li data-id="id-2" class="brun">
                            <a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery4]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_2.jpg" alt=""></a>
                            <p>Vestibulum libero nisl neque.</p>
                            <a href="more.jsp" class="btn">En savoir plus ...</a>
                        </li>
                        <li data-id="id-3" class="blond">
                            <a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery4]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_3.jpg" alt=""></a>
                            <p>Vestibulum libero nisl neque.</p>
                            <a href="more.jsp" class="btn">En savoir plus ...</a>
                        </li>
                        <li data-id="id-4" class="brun">
                            <a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery4]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_4.jpg" alt=""></a>
                            <p>Vestibulum libero nisl neque.</p>
                            <a href="more.jsp" class="btn">En savoir plus ...</a>
                        </li>
                        <li data-id="id-5" class="blond">
                            <a href="images/stock_images/900x500_5.jpg" data-gal="prettyPhoto[gallery4]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_5.jpg" alt=""></a>
                            <p>Vestibulum libero nisl neque.</p>
                            <a href="more.jsp" class="btn">En savoir plus ...</a>
                        </li>
                        <li data-id="id-6" class="blond">
                            <a href="images/stock_images/900x500_6.jpg" data-gal="prettyPhoto[gallery4]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_6.jpg" alt=""></a>
                            <p>Vestibulum libero nisl neque.</p>
                            <a href="more.jsp" class="btn">En savoir plus ...</a>
                        </li>
                        <li data-id="id-7" class="blond">
                            <a href="images/stock_images/900x500_7.jpg" data-gal="prettyPhoto[gallery4]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_7.jpg" alt=""></a>
                            <p>Vestibulum libero nisl neque.</p>
                            <a href="more.jsp" class="btn">En savoir plus ...</a>
                        </li>
                        <li data-id="id-8" class="brun">
                            <a href="images/stock_images/900x500_8.jpg" data-gal="prettyPhoto[gallery4]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_8.jpg" alt=""></a>
                            <p>Vestibulum libero nisl neque.</p>
                            <a href="more.jsp" class="btn">En savoir plus ...</a>
                        </li>
                        <li data-id="id-9" class="brun">
                            <a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery4]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_4.jpg" alt=""></a>
                            <p>Vestibulum libero nisl neque.</p>
                            <a href="more.jsp" class="btn">En savoir plus ...</a>
                        </li>
                        <li data-id="id-10" class="blond">
                            <a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery4]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_3.jpg" alt=""></a>
                            <p>Vestibulum libero nisl neque.</p>
                            <a href="more.jsp" class="btn">En savoir plus ...</a>
                        </li>
                        <li data-id="id-11" class="brun">
                            <a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery4]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_2.jpg" alt=""></a>
                            <p>Vestibulum libero nisl neque.</p>
                            <a href="more.jsp" class="btn">En savoir plus ...</a>
                        </li>
                        <li data-id="id-12" class="blond">
                            <a href="images/stock_images/900x500_1.jpg" data-gal="prettyPhoto[gallery4]" class="image_style3 image_with_capt lightbox-image"><img src="images/stock_images/200x150_1.jpg" alt=""></a>
                            <p>Vestibulum libero nisl neque.</p>
                            <a href="more.jsp" class="btn">En savoir plus ...</a>
                        </li>
                    </ul>
                    <div class="wrapper">
                        <div class="grid_24">
                            <dl class="description-box description-box-pad3">
                                <dt><a class="description-dark">Description<span></span></a></dt>
                                <dd>
                                    <div class="inner">
                                        <p><a href="http://razorjack.net/quicksand/index.html">QuickSand plugin</a> (<strong>jquery.quicksand.js</strong>) is used to filter images.</p>
                                        <p>Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items.</p>
                                        <p>First of all create a list with image categories.</p>

                                        <p>Then you need to create a list of items that will be filtered.</p>					
                                        <p>Please note that each new &lt;li&gt; tag should have attribute<strong> data-id="id-1"</strong> assigned with sufficient id number and class <strong>class="Category1"</strong> with the required category name. Please make sure that your category name matches the data-value attribute in the categories list. It is required to define  <strong>.image-grid li</strong> element width and height in <strong>style.css </strong>file.</p>
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </section>	
        </div>
        <!--==============================footer=================================-->
            <footer>
                <div class=" container_24">
                    <div class="wrapper">
                        <div class="grid_6 suffix_2">
                            <h1 class="footer-logo"><a href="index.jsp">idealex</a></h1>
                            <p>Adopte Un Presta</p>
                            <p class="color1 privacy">&copy; 2013 <span>|</span>  <a href="index-7.html">Politique de confidentialité</a> <!-- {%FOOTER_LINK} --></p>
                        </div>
                        <div class="grid_7 suffix_2">
                            <h4>Liens connexes</h4>
                            <div class="wrapper">
                                <div class="grid_4 alpha">
                                    <ul class="footer-list">
                                        <li><a href="more.jsp">A propos de nous</a></li>
                                        <li><a href="more.jsp">Notre concept</a></li>
                                        <li><a href="more.jsp">Nos partenaires</a></li>
                                        <li><a href="more.jsp">Evénements &amp; Press</a></li>
                                        <li><a href="more.jsp">Nous contacter</a></li>
                                    </ul>
                                </div>
                                <div class="grid_3 omega">
                                    <ul class="footer-list">
                                        <li><a href="more.jsp">Se connecter</a></li>
                                        <li><a href="more.jsp">Forums</a></li>
                                        <li><a href="more.jsp">Programme de fidélité</a></li>
                                        <li><a href="more.jsp">FAQ</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="grid_7">
                            <h4>Nous suivre</h4>
                            <ul class="tooltips">
                                <li><a href="more.jsp"><img src="images/icon1.png" alt=""><span>RSS</span></a></li>
                                <li><a href="more.jsp"><img src="images/icon3.png" alt=""><span>Facebook</span></a></li>
                                <li><a href="more.jsp"><img src="images/icon2.png" alt=""><span>Twitter</span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </footer>
        </body>
    </html>


